<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Service UI Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main>
    <th:div th:fragment="switchbutton (id,label)">
        <div th:id="${id + 'SwitchButtonPanel'}" style="display: none">
            <button th:id="${id + 'Button'}" th:name="${id + 'Button'}"
                    class="mdc-switch mdc-switch--unselected"
                    type="button" role="switch" aria-checked="false">
                <div class="mdc-switch__track"></div>
                <div class="mdc-switch__handle-track">
                    <div class="mdc-switch__handle">
                        <div class="mdc-switch__shadow">
                            <div class="mdc-elevation-overlay"></div>
                        </div>
                        <div class="mdc-switch__ripple"></div>
                        <div class="mdc-switch__icons">
                            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
                                <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
                            </svg>
                            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
                                <path d="M20 13H4v-2h16v2z" />
                            </svg>
                        </div>
                    </div>
                </div>
                <span class="mdc-switch__focus-ring-wrapper">
                    <div class="mdc-switch__focus-ring"></div>
                </span>
            </button>
            <label class="form-check-label" th:id="${id + 'ButtonLabel'}" th:utext="#{${label}}">Switch Me</label>
            <input type="hidden" th:name="${id}" th:id="${id}" value="false" th:data-switch-btn="${id + 'Button'}"/>
        </div>
        <div th:id="${id + 'checkBoxPanel'}" class="form-check form-switch" style="display: none">
            <input type="checkbox" class="form-check-input" th:id="${id}" th:name="${id}" />
            <label class="form-check-label" th:for="${id}" th:id="${id + 'ButtonLabel'}" th:utext="#{${label}}">Switch Me</label>
        </div>

        <script th:inline="javascript">
            /*<![CDATA[*/
            document.addEventListener('DOMContentLoaded', () => {
                if (typeof mdc === 'undefined' || mdc === undefined) {
                    $(/*[[${'#' + id + 'SwitchButtonPanel'}]]*/).hide().empty();
                    $(/*[[${'#' + id + 'checkBoxPanel'}]]*/).show();
                } else {
                    $(/*[[${'#' + id + 'SwitchButtonPanel'}]]*/).show();
                    $(/*[[${'#' + id + 'checkBoxPanel'}]]*/).hide().empty();
                }
            });
            /*]]>*/
        </script>
    </th:div>
</main>
</body>

</html>
